import React from 'react'
import styles from "../assets/styles/login.module.less"
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input, message } from 'antd';
import {loginApi} from "../apis/userApi"
import {useNavigate} from "react-router-dom"
import {useSelector} from "react-redux"

export default function Login() {
  const navigate = useNavigate()
  const storeData = useSelector(state=>{
    return state.countRD
  })
  const onFinish =async (values) => {
    const res = await loginApi(values)
    console.log(res);
    if(res.data.code){
      message.success("登录成功")
      const {token,userInfo} = res.data.data
      localStorage.setItem("token",token)
      localStorage.setItem("userInfo",JSON.stringify(userInfo))
      navigate("/home/",{replace:true})
    }else{
      message.error("登录失败")
    }
  };
  return (
    <div className={styles.container}>
      <div className={styles.panel}>
        <Form
          name="normal_login"
          className="login-form"
          initialValues={{
            remember: false
          }}
          onFinish={onFinish}
        >
          <Form.Item
            name="account"
            rules={[
              {
                required: true,
                message: 'Please input your Username!',
              },
            ]}
          >
            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[
              {
                required: true,
                message: 'Please input your Password!',
              },
            ]}
          >
            <Input
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder="Password"
            
            />
          </Form.Item>
          <Form.Item>
            <Form.Item name="remember" valuePropName="checked" noStyle>
              <Checkbox>Remember me</Checkbox>
            </Form.Item>

            <a className="login-form-forgot" href="">
              Forgot password
            </a>
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit" className="login-form-button">
              Log in
            </Button>
            Or <a href="">register now!</a>
          </Form.Item>
        </Form>
      </div>
      <div>{storeData.count}</div>
    </div>
  )
}
